<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="display: flex;flex-wrap: wrap; margin-top: 20px;">
            <div style="width: 350px;display: flex">
                <el-date-picker
                        v-model="searchData"
                        type="datetimerange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                />
                <el-button type="primary"
                           style="color: #fff;font-size: 12px;background-color: #1890ff;margin-left: 15px"
                           @click="load">搜索
                </el-button>
            </div>
        </div>
        <!-- 添加横向滚动容器 -->
        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
            <el-table-column prop="equipmentId" label="设备识别码" width="120" fixed="left"/>
            <el-table-column prop="sendTime" label="发送时间" width="160" fixed="left"/>
            <el-table-column prop="upPacketSn" label="上行包序列号" width="120"/>
            <el-table-column prop="deviceType" label="设备类型" width="120"/>
            <el-table-column prop="productId" label="产品ID" width="120"/>
            <el-table-column prop="deviceId" label="设备ID" width="150"/>
            <el-table-column prop="protocol" label="通信协议" width="120"/>
            <el-table-column prop="messageType" label="消息类型" width="120"/>
            <el-table-column prop="assocAssetId" label="关联资产ID" width="150"/>
            <el-table-column prop="tenantId" label="租户ID" width="120"/>
            <el-table-column prop="imsi" label="SIM卡" width="150"/>
            <el-table-column prop="topic" label="MQTT主题" width="200" show-overflow-tooltip/>
            <el-table-column prop="upDataSn" label="上行数据序列号" width="120"/>
            <el-table-column prop="serviceId" label="服务ID" width="120"/>
            <el-table-column prop="pci" label="物理小区标识" width="120"/>
            <el-table-column prop="rsrp" label="参考信号接收功率" width="150"/>
            <el-table-column prop="cellId" label="小区标识" width="120"/>
            <el-table-column prop="sinr" label="信号干扰加噪声比" width="150"/>
            <el-table-column prop="ecl" label="小区唯一标识" width="120"/>
            <el-table-column prop="iccid" label="设备ICCID" width="150"/>
            <el-table-column prop="location" label="位置信息" width="200" show-overflow-tooltip/>
            <el-table-column prop="powerType" label="电源类型" width="120">
                <template #default="scope">
                    {{ formatPowerType(scope.row.powerType) }}
                </template>
            </el-table-column>
            <el-table-column prop="devType" label="设备类型" width="120"/>
            <el-table-column prop="version" label="设备固件版本号" width="150"/>
            <el-table-column prop="devModel" label="设备型号" width="120"/>
            <el-table-column prop="sendInterval" label="数据发送间隔(s)" width="140"/>
            <el-table-column prop="selfCheckDays" label="自检间隔天数(day)" width="140"/>
            <el-table-column prop="sampInterval" label="数据采样间隔(s)" width="140"/>
            <el-table-column prop="alarmsTh" label="告警门限" width="120" show-overflow-tooltip/>
            <el-table-column prop="featuresBits" label="设备功能配置位" width="150"/>
            <el-table-column prop="network" label="网络类型" width="120"/>
            <el-table-column prop="csq" label="CSQ" width="100"/>
            <el-table-column prop="alarmsDat" label="告警数据" width="200" show-overflow-tooltip/>
            <el-table-column prop="alarm" label="系统告警" width="120">
                <template #default="scope">
                    {{ formatAlarm(scope.row.alarm) }}
                </template>
            </el-table-column>
            <el-table-column prop="sensorDat" label="传感器数据" width="200" show-overflow-tooltip/>
            <el-table-column prop="sampTime" label="数据采样时间" width="160"/>
            <el-table-column prop="batLevel" label="电量百分比(%)" width="120"/>
            <el-table-column prop="event" label="设备事件" width="120"/>
        </el-table>
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>
<script>
    import request from "@/utils/request.js";
    import Breadcrumb from "@/components/Breadcrumb.vue";

    export default {
        name: "FireSysData",
        components: {Breadcrumb},
        data() {
            return {
                currentData: {},
                searchData: [],
                tableData: [],  // 表单
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            // 搜索及初始化
            load() {
                let startTime = "", endTime = ""
                if (this.searchData !== null && this.searchData.length !== 0) {
                    startTime = this.searchData[0]
                    endTime = this.searchData[1]
                }
                request.get("/history-fire-cock/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&equipmentInputStoreId=" + this.$route.query.equipmentInputStoreId + "&startTime=" + startTime + "&endTime=" + endTime).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            // 格式化告警状态
            formatAlarm(alarmValue) {
                return alarmValue === 0 ? '正常' : alarmValue === 1 ? '告警' : '未知';
            },
            // 格式化电源类型
            formatPowerType(type) {
                const types = {
                    0: '市电',
                    1: '电池',
                    2: '太阳能'
                };
                return types[type] || '未知';
            },
            reset(val) {
                this.isEdit = false;
                this.operationItemDialog = false;
                this.form = {};
                this.$refs[val].clearValidate();
            },
            // 删除确定弹窗
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/sdf300-history-data/delete/" + scope.id).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
        }
    }
</script>

<style scoped>
    :deep(.el-table th .cell) {
        font-weight: 700
    }
</style>
